<template>
  <div class="wrap">
    <!-- 顶部导航图片 -->
    <div class="top-bg"></div>
    <!-- 左侧菜单 -->
    <div class="menu-list">
      <div class="head" v-for="(item,index) in userInfo" :key="index">
        <div class="head-pic" :style="{ 'backgroundImage': 'url(/api/upload/'+item.userImg+')'}"></div>
        <span class="head-name">{{item.userName}}</span>
      </div>

      <el-menu background-color="#fff" text-color="#000" active-text-color="#e6a23c">
        <el-menu-item class="menu-item-white" index="1" @click="goBackMyCenter()">
          <i class="el-icon-s-home icon-color"></i>
          <span slot="title">返回我的</span>
        </el-menu-item>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-bell icon-color"></i>
            <span>ta的动态</span>
          </template>
          <el-menu-item index="2-1" @click="toggle(2)">-&nbsp;ta的菜谱</el-menu-item>
          <el-menu-item index="2-2" @click="toggle(3)">-&nbsp;ta的笔记</el-menu-item>
        </el-submenu>
      </el-menu>
      <div class="menu-list-footer"></div>
    </div>
    <!-- 右侧内容展示 -->
    <div class="menu-content">
      <defaultcom v-show="show1" :uid="uid"></defaultcom>
      <othermenu v-show="show2" :uid="uid"></othermenu>
      <othernote v-show="show3" :uid="uid"></othernote>
    </div>
  </div>
</template>


<script>
import othermenu from "@/components/perscenter/other/OtherMenu";
import othernote from "@/components/perscenter/other/OtherNote";
import defaultcom from "@/components/perscenter/other/DefaultCom";

export default {
  created() {
    this.uid = this.$route.query.userId;
    this.loadData();
  },
  data() {
    return {
      show1: true,
      show2: false,
      show3: false,
      uid: "",
      userInfo: []
    };
  },
  components: {
    defaultcom: defaultcom,
    othermenu: othermenu,
    othernote: othernote
  },
  methods: {
    loadData() {
      this.$axios
        .get("/api/users/getUserInfo", {
          params: { userId: this.uid }
        })
        .then(res => {
          this.userInfo = res.data.data;
          console.log("userInfo", this.userInfo);
        })
        .catch(err => {});
    },
    goBackMyCenter() {
      this.$router.push("/personcenter");
    },
    toggle(index) {
      if (index == 1) {
        this.show1 = true;
        this.show2 = false;
        this.show3 = false;
      } else if (index == 2) {
        this.show1 = false;
        this.show2 = true;
        this.show3 = false;
      } else if (index == 3) {
        this.show1 = false;
        this.show2 = false;
        this.show3 = true;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.wrap {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 40px;
  .top-bg {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    background-image: url("../../../assets/personcenter/b1.jpg");
    margin-bottom: 60px;
    background-size: cover;
    background-position: 0 -180px;
  }

  .menu-list {
    width: 240px;
    border-radius: 10px;
    float: left;
    margin-left: 4px;
    margin-right: 38px;
    .head {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0px 18px 18px -16px #e6a23c inset;
      border-radius: 10px;
      .head-pic {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-top: 16px;
        background-size: cover;
      }
      .head-btn {
        margin: 10px 0;
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #e6a23c;
        color: #e6a23c;
        border-radius: 10px;
        background-color: #fff;
      }
      .head-btn:hover,
      .head-btn:visited {
        background-color: #e6a23c;
        color: white;
      }
    }
    .icon-color {
      color: #000;
    }
    .menu-list-footer {
      width: 100%;
      height: 30px;
      box-shadow: 0px -16px 12px -12px #e6a23c inset;
      border-radius: 10px;
    }
  }
  .menu-content {
    border-radius: 10px;
    margin-left: 280px;
    padding: 30px;
    box-shadow: 0px 8px 8px -8px #e6a23c inset;
  }
}
/deep/.el-menu {
  border-right: 0;
}
/deep/.el-menu-item:hover,
/deep/.el-submenu__title:hover {
  background-color: #e6a23c !important;
  color: #fff !important;
  i {
    color: #fff !important;
  }
}
/deep/.el-menu {
  .is-active {
    background-color: #e6a23c !important;
    color: #fff !important;
  }
}
/deep/.is-opened {
  background-color: #e6a23c !important;
  color: #fff !important;
}
/deep/.el-submenu__title i {
  color: #000;
  font-weight: 700;
}
</style>